<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Haloooo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/highmaps.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/modules/data.js'); ?>"></script>
		<script type="text/javascript">
		$(function () {
			var data = [{
				code: "CGK",
				color: '#00FF00',
				z: 300000
			},
			{
				code: "UPG",
				color: '#00FF00',
				z: 300000
			}];
			
			$.getJSON('http://localhost/flightmaps/assets/js/indonesia.geojson', function (geojson) {
				
				// Initiate the chart
				$('#container').highcharts('Map', {
					
					title : {
						text : 'Indonesia\'s Airport Departure / Arrival Information'
					},

					mapNavigation: {
						enabled: true,
						buttonOptions: {
							verticalAlign: 'bottom'
						}
					},
					
					legend: {
						enabled: false
					},

					series : [{
						name: 'Countries',
						mapData: Highcharts.geojson(geojson, 'map'),
						color: '#E0E0E0',
						enableMouseTracking: false
					},{
						type: 'mapbubble',
						mapData: Highcharts.geojson(geojson, 'map'),
						joinBy: ['BDR_ID', 'code'],
						name: 'Domestik',
						data: data,
						minSize: 5,
						maxSize: '12%',
						tooltip: {
							pointFormat: '{point.code}: {point.z} pesawat'
						}
					}]
				});
			});
		});
		</script>
	</head>
	<body>
		<div id="container"></div>
	</body>
</html>